<template>
  <div class="mat-notes">
    <div v-show="context.scope == NoteScope.Article">
      <mat-notes :context="context" @update-context='$emit("update-context", $event)' @edit-note="editNote"></mat-notes>
    </div>
    <div v-show="context.scope == NoteScope.Line">
      <line-notes :context="context" @update-context='$emit("update-context", $event)'></line-notes>
    </div>
    <div v-show="context.scope == NoteScope.Word || context.scope == NoteScope.Char">
      <word-notes :context="ontext" @update-context='$emit("update-context", $event)'></word-notes>
    </div>
  </div>
</template>

<script>
import MatNotes from "./MatNotes.vue";
import LineNotes from "./LineNotes.vue";
import WordNotes from "./WordNotes.vue";
import {NoteScope} from "@js/constants.js";
export default {
  components: {
    MatNotes,
    LineNotes,
    WordNotes
  },
  props: ["context"],
  data() {
    return {
      NoteScope: NoteScope,
      showEditor: false,
      filterType: "all",
      noteType: "note",
      isFav: false,
      editorText: "",
      note: {
        content: ""
      },
      notes: []
    };
  },
  methods: {
    editNote(note) {
      console.log("try to edit note:", note);
    }
  }
};
</script>


<style lang="stylus">
.note-section
  margin-bottom 30px

  .note-ref
    border 1px solid #D9ECFF
    border-radius 2px
    box-shadow 0 2px 6px 0 #D9ECFF
    background-color #F7FBFF
    padding 10px 20px
    font-weight bold
    font-size 1.2em
    color #080400
    margin-top 10px

  .note-section-title
    padding 0.5vh 0.5vw
    margin-bottom 0.5vh
    border-bottom 1px dotted #eee
    font-size 0.9em
    color #999

    .note-toolbar
      margin-right 20px

    .note-type-filter
      margin-left 20px
      float right

    svg
      margin-left 6px
      color #409EFF
      cursor pointer

    svg.red
      color #F66

    .right
      float right

    .sort-by
      font-weight normal
      color #999

  .note-editor
    border 1px dotted #ddd
    border-radius 5px
    padding 15px
    background-color #f7fbff

    div
      margin-bottom 10px

    .note-editor-title
      font-weight bold
      margin-bottom 10px
</style>